<template>
  <view class="container">
    <navigationBar custom>
      <view class="tabs">
        <Tabs :list="tabsList" :active="tabsActive" @change="onChangeTab"></Tabs>
      </view>
    </navigationBar>

    <view class="main">
      <template v-if="tabsActive===1">
        <view class="tab-bar">
          <TabBar :list="tabBarList" :active="tabBarActive" @change="onChangeTabBar"></TabBar>
        </view>

        <view class="main-box">
          <!--轨迹录制-->
          <template v-if="tabBarActive===1">
            <Record></Record>
          </template>
          <!--轨迹管理-->
          <template v-else>
            <Manage></Manage>
          </template>
        </view>
      </template>


      <template v-else>
        <!--机器控制-->
        <Machine></Machine>
      </template>
    </view>

  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue"
import Machine from "/@/pages/control/machine/machine.vue";
import Record from "/src/pages/control/record/record.vue";
import Manage from "/@/pages/control/manage/manage.vue";

const tabsList = [
  {label: '智能驾驶', value: 1},
  {label: '机器控制', value: 2},
]

const tabBarList = [
  {label: '轨迹录制', value: 1},
  {label: '轨迹管理', value: 2},
]

const tabsActive = ref(1)
const tabBarActive = ref(1)

onLoad(() => {
})

const onChangeTab = (e) => {
  tabsActive.value = e.value
  tabBarActive.value = 1
}

const onChangeTabBar = (e) => {
  tabBarActive.value = e.value
}
</script>

<style lang="scss" scoped>
@import "control";
</style>
